<template>
  <div>
    <div class="menu_container" ref="menuHome" @click="toggleMenu">
      <img :src="menuSrc">
    </div>
    <div class="menu_item" v-for="(item,index) in menuItems" :id="item.id" @click="clickMenu(item,index)" >
      <img :src="item.src">
      <div class="item_name" v-if="openFlag">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "toggleMenu",
    props: {
      menuSrc: {
        default: ""
      },
      position: {
        default: 'LT'
      },
      width: {
        default: 50,
      },
      baseDistance: {
        default: 150,
      },
      menuBg: {
        default: 'white'
      },
      itemBg: {
        default: 'white'
      },
      menuItems: {
        type: Array,
      }
    },
    data() {
      return {
        openFlag: false,
        operators: ['+', '+'],
      }
    },
    mounted() {
      this.$refs.menuHome.style.width = this.width + 'px';
      this.$refs.menuHome.style.height = this.width + 'px';
      this.$refs.menuHome.style.lineHeight = this.width + 'px';
      this.$refs.menuHome.style.background = this.menuBg;
      this.menuItems.forEach((item) => {
        let el = document.getElementById(item.id);
        el.style.width = `${this.width * 0.8}px`;
        el.style.height = `${this.width * 0.8}px`;
        el.style.lineHeight = `${this.width * 0.8}px`;
        el.style.background = this.itemBg;
      });
        this.$refs.menuHome.style.right = '20px';
        this.$refs.menuHome.style.bottom = '20px';
        this.menuItems.forEach((item) => {
          let el = document.getElementById(item.id);
          el.style.right = '26px';
          el.style.bottom = '26px';
        });
        this.operators = ['-', '-'];
    },
    methods: {
      showopenFlag(){
        this.openFlag = true
      },
      hideopenFlag(){
         this.openFlag = false
      },

      toggleMenu() {
        if (!this.openFlag) {
          this.menuItems.forEach((item, index) => {
            this.toggleMenuTransition(item.id, index, false)
          });
          this.$refs.menuHome.style.transform = 'rotate(360deg)';
        } else {
          this.menuItems.forEach((item, index) => {
            this.toggleMenuTransition(item.id, index, true)
          });
          this.$refs.menuHome.style.transform = 'rotate(0)';
        }
        this.openFlag = !this.openFlag;
      },
      toggleMenuTransition(name, index, revert) {

        let el = document.getElementById(name);
        let that = this;
        if(index>=5){
          el.style.display = `none`;
          return false
        }
        if (!revert) {
          let oneArea = 90 / (5 - 1);
          let axisX = Math.sin((5 - 1 - index) * oneArea * 2 * Math.PI / 360);
          let axisY = Math.cos((5 - 1 - index) * oneArea * 2 * Math.PI / 360)
          setTimeout(function () {
            el.style.transitionDuration = '200ms';
            el.style.transform = `translate(${that.operators[0]}${that.baseDistance * axisX}px,${that.operators[1]}${that.baseDistance * axisY }px)`;

          }, index * 100)
        } else {
          el.style.transitionDuration = '200ms';
          el.style.transform = `translate(0,0)`;
        }
      },
      clickMenu(item, index) {
        this.$emit('clickMenu', item, index)
      }
    }
  }
</script>

<style scoped>
  .menu_container {
    position: fixed;
    z-index: 100000;
    border-radius: 50%;
    transition-duration: 400ms;
    text-align: center;
    border: #efefef 3px solid;
    box-shadow: aliceblue 1px 1px 1px;
  }
  .menu_item {
    position: absolute;
    border-radius: 50%;
    z-index: 99;
    border: #efefef 3px solid;
    text-align: center;
    box-shadow: aliceblue 1px 1px 1px;
    z-index: 9999;
  }
  .item_name{
    position: absolute;
    top: 24px;
    left: 0;
    color: #777;
    font-size: 10px;
    height: 10px;
    z-index: 9999;
  }
  img {
    width: 50%;
    transform: translate(-5%, 20%);
  }
</style>
